<template>
  <div class="pages subcardserviceStatistics">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form :rules="rules">
          <el-row>
            <el-col :span="9">
              <el-form-item label="交易时间:" label-width="100px">
                <el-date-picker
                  size="small"
                  v-model="selectdata.transactionTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店:" label-width="100px">
                <el-select
                  filterable
                  size="small"
                  style="width:180px"
                  v-model="selectdata.storeList"
                  placeholder="全部"
                >
                  <el-option
                    v-for="(item,index) in storeLists"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="次卡名称:" prop="subCardName" label-width="100px">
                <el-select
                  style="width:180px"
                  size="small"
                  remote
                  reserve-keyword
                  :remote-method="remoteMethod"
                  v-model="selectdata.subCardName"
                  filterable
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in subCardNameList"
                    :key="item.goodsId"
                    :label="item.name"
                    :value="item.goodsId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="会员手机号:" prop="memberNumber" label-width="100px">
                <el-select
                  size="small"
                  style="width:180px"
                  remote
                  reserve-keyword
                  :remote-method="memberMethod"
                  v-model="selectdata.memberNumber"
                  filterable
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in memberNumberList"
                    :key="item.memberCompanyId"
                    :label="item.phone"
                    :value="item.memberCompanyId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
              <el-form-item label label-width="10px">
                <el-button
                  type="primary"
                  v-if="setRole('导出')"
                  size="mini"
                  class="Button"
                  @click="download"
                >导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="margin-bottom:20px;">服务金额:{{servicePriceAmount}} 元</div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="subcardserviceStatisticsList" stripe style="width: 100%">
          <el-table-column
            prop="timeEnd"
            :formatter="timeEnd"
            label="交易时间"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column prop="shopName" label="门店" align="center"></el-table-column>
          <el-table-column prop="cardName" label="次卡名称" align="center"></el-table-column>
          <el-table-column prop="serviceName" label="服务名称" align="center"></el-table-column>
          <el-table-column prop="cardNum" label="使用次数" align="center"></el-table-column>
          <el-table-column prop="servicePrice" label="服务金额" align="center"></el-table-column>
          <el-table-column prop="cardPrice" label="次卡售卖价" align="center"></el-table-column>
          <el-table-column prop="serviceLength" label="服务时长" align="center"></el-table-column>
          <el-table-column prop="phone" label="会员手机号" align="center"></el-table-column>
          <el-table-column prop="residueTimes" label="次卡剩余次数" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  selectBaseShopPageList,
  listTimesCard,
  findMemberByPhone,
  findByCardName,
  TimesCardExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "power", "companyName"]),
  data() {
    return {
      selectdata: {
        transactionTime: [], //商户
        storeList: "", //选择的门店
        subCardName: "", //次卡名称
        memberNumber: "" //会员手机号
      },
      rules: {
        timeStart: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ],
        timeEnd: [
          { required: false, message: "请输入开始时间", trigger: "change" }
        ]
      },
      subCardNameList: [], //次卡名称列表
      memberNumberList: [], //会员手机号列表
      searchInfo: "", //次卡名称
      memberInfo: "", //会员手机号
      subcardserviceStatisticsList: [], //列表数据
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      storeLists: [], //门店列表
      exportData: {},
      storeVlaue: "", //门店选择的值
      servicePriceAmount: "" //服务金额
    };
  },
  created() {},
  mounted() {
    this.warehouseList();
    this.data();
  },
  methods: {
    //  交易时间
    timeEnd: function(row) {
      return util.foryear(row.timeEnd) + " " + util.fortime(row.timeEnd);
    },
    //   次卡名称
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.searchInfo = query;
          this.subCardNameLists(this.selectdata.subCardName);
        }, 200);
      } else {
        this.subCardNameList = [];
      }
    },
    // 会员手机号
    memberMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.memberInfo = query;
          if (/^[0-9]+$/.test(query)) {
            //这是用正则表达是检查
            this.memberNumberLists(this.selectdata.memberNumber);
          } else {
            this.$message.error("请输入数字");
          }
        }, 200);
      } else {
        this.memberNumberList = [];
      }
    },
    data(picker) {
      //  获取今天日期
      const currentDate = new Date();
      var currentDates = currentDate.setTime(currentDate.getTime());
      var transactionDate = util.foryear(parseInt(currentDates));
      this.selectdata.transactionTime.push(transactionDate);
      this.selectdata.transactionTime.push(transactionDate);
      this.tableget(this.pageSize, 1);
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let dailySales = {
        companyId: this.merchantId,
        shopId: this.selectdata.storeList,
        startTime: this.selectdata.transactionTime[0],
        endTime: this.selectdata.transactionTime[1],
        goodsId: this.selectdata.subCardName,
        memberCompanyId: this.selectdata.memberNumber,
        pageNum: pageNum,
        pageSize: pageSize
      };
      this.exportData = {
        companyId: this.merchantId,
        shopId: this.selectdata.storeList,
        startTime: this.selectdata.transactionTime[0],
        endTime: this.selectdata.transactionTime[1],
        goodsId: this.selectdata.subCardName,
        memberCompanyId: this.selectdata.memberNumber
      };
      listTimesCard(dailySales).then(res => {
        this.subcardserviceStatisticsList = res.data.list;
        this.servicePriceAmount = res.data.servicePriceAmount;
        this.subCardNameList = [];
        this.memberNumberList = [];
        this.totalItems = res.data.pageTotal;
      });
    },

    // 搜索
    searchSelect() {
      this.currentPage = 1;
      this.tableget(this.pageSize, this.currentPage);
    },
    //跳页
    toPage() {
      this.currentPage = 1;
      this.tableget(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 门店列表
    warehouseList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.storeLists = res.data.list;
      });
    },

    // 导出
    download() {
      if (this.subcardserviceStatisticsList.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        TimesCardExport(this.exportData).then(res => {
          let fileName = "次卡服务统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    // 次卡名称
    subCardNameLists() {
      let data = {
        name: this.searchInfo,
        companyId: this.merchantId
      };
      findByCardName(data).then(res => {
        let a = {
          goodsId: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.subCardNameList = res.data.list;
      });
    },
    // 会员手机号
    memberNumberLists() {
      let data = {
        phone: this.memberInfo,
        companyId: this.merchantId
      };
      findMemberByPhone(data).then(res => {
        let a = {
          memberCompanyId: "",
          phone: "全部"
        };
        res.data.list.unshift(a);
        this.memberNumberList = res.data.list;
      });
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
</style>
<style>
.outsourcingstatistics .delete .el-input__suffix {
  display: none;
}
.outsourcingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.outsourcingstatistics .el-form-item {
  margin-bottom: 10px;
}
/* .el-select-dropdown__empty{
  color:#fff !important;
} */
</style>



